<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>咖啡制作全过程动画特效演示</title>
<meta name="description" content="咖啡制作全过程演示"/>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<style>
    #my{
        font-size:60px;
        margin: 20px 0;
        color: #c74014;
        text-align: center;
    }
</style>
</head>

<body>
<div class="animation-container" style=" margin: 50px auto;">
    <div class="coffee-bag-container">
        <div class="coffee-bag"> <span class="mast"></span> <span class="bag-top"></span> <span class="bag-body"></span> <span class="logo"> <span class="bean bean-one"></span> <span class="bean bean-two"></span> </span> <span class="info info-one"></span> <span class="info info-two"></span> <span class="info info-three"></span> <span class="bag-bottom"></span> </div>
        <!-- ./coffee-bag --> 
    </div>
    <!-- ./coffee-bag-container --> 
    <span class="grounds-container"> <span class="grounds grounds-one"></span> <span class="grounds grounds-two"></span> <span class="grounds grounds-three"></span> <span class="grounds grounds-four"></span> </span>
    <div class="filter"></div>
    <!-- ./filter --> 
    
    <!-- TODO: create coffee grounds falling from the bag into the filter --> 
    
    <span class="roasting-top"></span>
    <div class="roasting-body"> <span class="handle-container"> <span class="handle-one"></span> <span class="handle-two"></span> </span> </div>
    <!-- ./roasting-body --> 
    
    <!-- the black part between the coffee pot and the filter --> 
    <span class="screen"></span> <span class="water-attachment"></span> <span class="water-lid"></span> <span class="water-pot"> <span class="water-pot-gloss"></span> <span class="fill-line fill-line-first"></span> <span class="fill-line fill-line-last"></span> <span class="water"></span> </span> <span class="warmer-plate"></span> <span class="warmer"> <span class="warmer-accent accent-one"></span> <span class="warmer-accent accent-two"></span> <span class="warmer-accent accent-three"></span> </span> <span class="warmer-base"></span> <span class="coffee-pot-container"> <span class="coffee-pot-top"></span> <span class="coffee-pot-glass-top"></span> <span class="coffee-pot-glass-connector"></span> <span class="coffee-pot-glass-base"> <span class="coffee-pot-gloss"></span> </span> <span class="coffee-pot-handle-container"> <span class="handle-top"></span> <span class="handle-bottom"></span> </span> <span class="coffee-drip"></span> <span class="drip-cover"></span> <span class="coffee"></span> </span> <span class="coffee-warmer-plate"></span> <span class="coffee-base-left-end"></span> <span class="coffee-maker-base"></span> <span class="control-panel"> <span class="gauge-one"></span> <span class="gauge-two"></span> </span> <span class="coffee-base-right-end"></span> <span class="leg leg-one"></span> <span class="leg leg-two"></span>
</div>
<h1 id="my">祝愿酒管20305郭思琪同学咖啡课永远学习快乐!</h1>
<script src="js/index.js"></script>
</body>
</html>
